<template>
    <div class="login">

        <el-row :gutter="20">
            <el-col :span="6">账号</el-col>
            <el-col :span="6">
                <el-input v-model="username" style="width: 240px" placeholder="请输入账号" /> </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">密码</el-col>
            <el-col :span="6"><el-input v-model="password" style="width: 240px" type="password" placeholder="请输入密码"
                    show-password @keyup.enter="login" /> </el-col>
        </el-row>
        <el-row :gutter="100">
            <el-col :span="6"><el-button type="primary" plain @click="login">登录</el-button> </el-col>
            <el-col :span="6"><el-button type="primary" plain @click="reset">重置</el-button> </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getCurrentInstance } from 'vue';
import route from '@/router';
import { useRoute } from 'vue-router';

let routedata = useRoute()


const username = ref('')
const password = ref('')

const instance = getCurrentInstance()

function reset() {
    username.value = ''
    password.value = ''
}

function login() {
    instance!.appContext.config.globalProperties.$axios.post('/api/user/login', null, {
        params: {
            username: username.value,
            password: password.value
        }
    })
        .then((result: any) => {
            let i = result.data.code
            if (i == 0) {
                //保存token
                localStorage.setItem("token", result.data.data.token)
                //路由到首页面
                if (routedata.query.redirect != null) {
                    route.push({
                        path: routedata.query.redirect as string
                    })
                } else {
                    route.push({
                        path:"/"
                    })
                }
            } else {
                //弹出错误信息
                alert(result.data.masg)

            }

        })


}


</script>

<style scoped>
.login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.el-row {
    margin-bottom: 10px;
}

.el-row>.el-col {
    text-align: center;
    line-height: 40px;
}
</style>